<template>
	<view class="contacts">
		<view class="contacts-container">
      <view class="fz">好友</view>
			<view class="user-list">
				<view class="user-list-item" v-for="(s, id) in users" :key="id"
					@click="privateChat(s.data.userId)">
					<view class="user-item-avatar">
						<image :src="s.data.avatar"></image>
					</view>
					<view class="user-item-info">
						<text class="user-item-info__name">{{ s.data.nickName.substring(0,10) }}</text>
					</view>
				</view>
			</view>
      <view class="fz">群聊</view>
      <view class="user-list">
        <view class="user-list-item" v-for="(s, id) in conversationgroups" :key="id"
              @click="groupChat(s.id)">
          <view class="user-item-avatar">
            <image :src="s.groupAvatar"></image>
          </view>
          <view class="user-item-info">
            <text class="user-item-info__name">{{ s.groupName}}</text>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	import {
		userList,
		getMessage,
		byUserId
	} from "../../../ruoyi-ui/src/api/message/message";
  import {listGroups} from "../../../ruoyi-ui/src/api/message/group";

	export default {
		data() {
			return {
				userList: [],
				currentUser: "",
				users: [],
        conversationgroups:[]
			};
		},
		created() {
			this.currentUser = this.$store.state.user.user;
			byUserId(this.currentUser.userId).then(resp => {
				this.users = resp
			})
      listGroups(this.currentUser.userId).then(resp => {
        this.conversationgroups = resp.rows
      })
		},
		methods: {
			privateChat(id) {
				this.$store.state.chat.id = id
				uni.navigateTo({
					url: '/pages/message/message'
				});
			},
      groupChat(id) {
				this.$store.state.chat.id = id
				uni.navigateTo({
					url: '/pages/message/groupChat'
				});
			},

		}
	};
</script>

<style>

	.contacts {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
    font-family: 楷体;
	}

	.contacts .contacts-container {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.contacts .user-list-item {
		height: 132rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}

	.black-white {
		filter: grayscale(100%);
	}

	.contacts .contacts-title {
		height: 80rpx;
		line-height: 100rpx;
		font-size: 34rpx;
		color: #666666;
		background: #F3F4F7;
		text-indent: 44rpx;
	}

	.contacts .user-list {
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}

  .fz{
    font-size: 23px;
    margin: 10px 0;
  }

	.contacts .user-item-avatar {
		width: 96rpx;
		height: 96rpx;
		margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}

	.contacts .user-item-avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.contacts .user-item-info {
		height: 130rpx;
		padding-right: 32rpx;
		line-height: 88rpx;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contacts .user-item-info__name {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}

	.contacts .user-item-info__tips {
		height: 44rpx;
		width: 64rpx;
		border-radius: 24rpx;
		font-size: 34rpx;
		line-height: 44rpx;
		background: #D02129;
		color: #ffffff;
		font-family: Cabin;
		text-align: center;
	}

	.contacts .online-dot {
		position: absolute;
		width: 32rpx !important;
		height: 32rpx !important;
		right: 0;
		bottom: 0;
	}
</style>